<template>
  <div>
    <sub-header pathName="/people" :tab="tab"></sub-header>
    <div class="rypage container">
      <div class="content_wrapper teambox">
        <ul class="content_list clearfix">
          <li
            class="item_block wow"
            style="visibility: visible; animation-name: fadeInUp"
            v-for="(item, index) in dataArr"
            :key="index"
          >
            <div class="item_img" target="_blank">
              <router-link
                class="item_box"
                :to="{ name: 'PeopleInfo', query: { id: item.id } }"
              >
                <img :src="item.cover | pathImg" />
              </router-link>
              <div class="item_mask"></div>
            </div>
            <div class="item_wrapper">
              <router-link
                class="item_box"
                :to="{ name: 'PeopleInfo', query: { id: item.id } }"
              >
                <div class="item_info clearfix">
                  <div class="text_wrap">
                    <p class="title ellipsis">{{ item | filterTitle }}</p>
                    <p class="subtitle ellipsis">{{ item | filterSubTitle }}</p>
                  </div>
                </div>
                <div class="item_des description">
                  {{ item | filterDescription }}
                </div>
              </router-link>
            </div>
          </li>
        </ul>
      </div>

      <pagination
        @clickPage="clickPage"
        :page="page"
        :total_page="total_page"
      ></pagination>
    </div>
  </div>
</template>
<script>
import SubHeader from '@/components/subHeader/subHeader.vue'
import { getCateData } from '@/service/getData.js'
import Pagination from '@/components/Pagination.vue'

export default {
  components: {
    'sub-header': SubHeader,
    'pagination': Pagination
  },
  data() {
    return {
      tab: 1,
      dataArr: [],
      page: 1,
      total_page: 1,
    }
  },
  computed: {
    cateId() {
      return this.tab + 5
    }
  },
  watch: {
    $route(to) {
      if (to.name == 'People' && to.query.tab) {
        this.tab = +to.query.tab
        this.page = 1
        this.dataArr = []
        this.getPeople()
      }
    },
  },
  created() {
    if (this.$route.query.tab) {
      this.tab = +this.$route.query.tab
    }
    this.getPeople()
  },
  methods: {
    clickPage(page) {
      this.page = page;
      this.getPeople();
    },
    async getPeople() {
      let res = await getCateData(this.cateId, this.page)
      this.total_page = res.total_page || 1
      if (res && res.content && res.content.length > 0) {
        this.dataArr = res.content || []
      }
    }
  },
}
</script>
<style scoped>
.teambox .item_block {
  transition: all 0.36s ease;
  position: relative;
  float: left;
  margin-bottom: 50px;
  width: calc(50% - 10px);
  height: 261px;
}

.teambox .item_block::after {
  content: "";
  display: block;
  clear: both;
}

.teambox .item_block:nth-child(2n + 1) {
  float: left;
}

.teambox .item_block:nth-child(2n) {
  float: right;
}

.teambox .item_block:hover .item_wrapper {
  /* background: #233876; */
  background: linear-gradient(to right,#00CCFF, #32CC68);

}

.teambox .item_block:hover .item_wrapper .text_wrap {
  transition: 0s;
  border-color: rgba(255, 255, 255, 0.08);
}

.teambox .item_block:hover .item_wrapper .text_wrap .title {
  color: #fff;
}

.teambox .item_block:hover .item_wrapper .text_wrap .subtitle {
  color: #fff;
}

.teambox .item_block:hover .item_wrapper .description {
  color: #bcc0cf;
}

.teambox .item_block:hover .details {
  transition: 0s;
  border-color: rgba(255, 255, 255, 0.08);
}

.teambox .item_block:hover .details:before {
  color: rgba(255, 255, 255, 0.3);
  left: 25px;
}

.teambox .item_block .item_img {
  float: left;
  width: 200px;
  overflow: hidden;
}

.teambox .item_block .item_img img {
  width: 100%;
  height: 261px;
}

.teambox .item_block .item_wrapper {
  position: relative;
  float: right;
  width: calc(100% - 200px);
  height: 100%;
  padding: 24px 20px 0 40px;
  box-sizing: border-box;
  transition: all 0.36s ease;
}

.teambox .item_block .item_wrapper .details {
  display: none;
}

.teambox .item_block .item_wrapper .text_wrap {
  transition: all 0.36s ease;
  transition-delay: 0.12s;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebebeb;
}

.teambox .item_block .item_wrapper .text_wrap .title {
  font-size: 16px;
  line-height: 30px;
  color: #333;
}

.teambox .item_block .item_wrapper .text_wrap .subtitle {
  font-size: 14px;
  line-height: 24px;
  color: #adadad;
}

.teambox .item_block .item_wrapper .description {
  font-size: 13px;
  line-height: 24px;
  height: 122px;
  overflow: hidden;
  margin-top: 15px;
  padding-right: 20px;
  box-sizing: border-box;
  color: #888;
}

.teambox .item_block .details {
  transition: all 0.36s ease;
  transition-delay: 0.12s;
  position: absolute;
  bottom: 40px;
  left: 239px;
  width: 56px;
  height: 26px;
  border-left: 1px solid #e5e5e5;
  color: transparent;
}

.teambox .item_block .details:before {
  font-family: icomoon;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  transition: all 0.36s ease;
  content: "\e90f";
  position: absolute;
  top: 50%;
  left: 15px;
  color: #999;
  font-size: 20px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.teambox .item_block:hover .details::before {
  color: rgba(255, 255, 255, 0.8);
}

.teambox .item_block:hover .item_img {
  overflow: hidden;
}

.teambox .item_block .item_img img {
  transition: all 0.3s ease-out 0s;
}

.teambox .item_block:hover .item_img img {
  -webkit-transform: scale(1.08);
  -ms-transform: scale(1.08);
  transform: scale(1.08);
}

.teambox .item_block .item_wrapper .description,
.teambox .item_block .item_wrapper .text_wrap .subtitle,
.teambox .item_block .item_wrapper .text_wrap .title {
  transition: all 0.3s ease-out 0s;
}

.teambox .item_block .item_wrapper .item_box {
  margin-top: 0;
  display: block;
  transition: all 0.3s ease-out 0s;
}

.teambox .item_block:hover .item_wrapper .item_box {
  margin-top: 10px;
}

.teambox .item_block:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.teambox .item_block:hover .item_wrapper .description {
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) {
  .teambox .item_block .item_img {
    width: 100%;
  }

  .teambox .item_block .item_wrapper {
    width: 100%;
    padding: 14px 10px 0 20px;
  }

  .teambox .item_block .item_wrapper .description {
    display: none;
  }

  .teambox .item_block {
    width: 50%;
  }

  .teambox .item_block {
    margin-bottom: 0px;
    height: 240px;
    overflow: hidden;
  }

  .teambox .item_block:hover .item_wrapper {
    background: none;
  }

  .teambox .item_block:hover {
    box-shadow: none;
  }

  .teambox .item_block:hover .details {
    transition: 0s;
    border-color: rgba(255, 255, 255, 0);
  }
}

@media (max-width: 480px) {
  .teambox .item_block .item_img {
    padding-left: 10px;
    padding-right: 10px;
  }

  .teambox .item_block .item_img img {
    width: 100%;
    height: 201px;
  }

  .teambox .item_block {
    height: 271px;
  }
}

@media (max-width: 400px) {
  .teambox .item_block .item_img {
    padding-left: 10px;
    padding-right: 10px;
  }

  .teambox .item_block .item_img img {
    width: 100%;
    height: 181px;
  }

  .teambox .item_block {
    height: 251px;
  }
}
</style>